<template>
  <div class="top-nav">
    <div class="nav-in">
      <!-- logo -->
      <div class="nav-logo">
        <img src="@/assets/images/logo.png" alt="" />
      </div>
      <!-- tab -->
      <div class="slotTab">
        <slot name="slotTab"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索框的值
      SearchValue: null,
    }
  },
  methods: {
    onSearch() {
      console.log('搜索...')
    },
  },
}
</script>

<style lang="less" scoped>
.top-nav {
  border-top: 0.2rem solid #1989fa;
  height: 3rem;
  width: 100%;
  background-color: white;
  box-shadow: 0 0 1.25rem 0 rgb(12 1 4 / 5%);
  .nav-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    width: 80rem;
    height: 100%;
    .nav-logo {
      height: 85%;
      img {
        height: 100%;
      }
    }
    .van-search {
      margin: 0 1.5rem;
      height: 100%;
      width: 20rem;
    }
    .slotTab {
      height: 100%;
    }
  }
}
</style>
